<template>
	<view>
		<template v-if="message.role === 'assistant' || message.role === 'system'">
			<view class="home-chat-message">
				<view class="home-chat-message-container">
					<view class="home-chat-message-avatar">
						<view class="no-dark">
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
							     width="30" height="30" fill="none" class="home_user-avtar__3QksJ">
								<defs>
									<path id="bot_svg__a" d="M0 0h30v30H0z"></path>
									<path id="bot_svg__c" d="M0 0h20.455v20.455H0z"></path>
								</defs>
								<g>
									<rect fill="#E7F8FF" width="30" height="30" rx="10"></rect>
									<mask id="bot_svg__b" fill="#fff">
										<use xlink:href="#bot_svg__a"></use>
									</mask>
									<g mask="url(#bot_svg__b)">
										<g transform="translate(4.773 4.773)">
											<mask id="bot_svg__d" fill="#fff">
												<use xlink:href="#bot_svg__c"></use>
											</mask>
											<g mask="url(#bot_svg__d)">
												<path fill-rule="evenodd"
												      d="M19.11 8.37c.17-.52.26-1.06.26-1.61 0-.9-.24-1.79-.71-2.57a5.24 5.24 0 0 0-4.53-2.59c-.37 0-.73.04-1.09.11A5.201 5.201 0 0 0 9.17 0h-.04C6.86 0 4.86 1.44 4.16 3.57A5.11 5.11 0 0 0 .71 6.04C.24 6.83 0 7.72 0 8.63c0 1.27.48 2.51 1.35 3.45-.18.52-.27 1.07-.27 1.61 0 .91.25 1.8.71 2.58 1.13 1.94 3.41 2.94 5.63 2.47a5.18 5.18 0 0 0 3.86 1.71h.05c2.26 0 4.27-1.44 4.97-3.57a5.132 5.132 0 0 0 3.45-2.47c.46-.78.7-1.67.7-2.58 0-1.28-.48-2.51-1.34-3.46ZM8.947 18.158c-.04.03-.08.05-.12.07.7.58 1.57.89 2.48.89h.01c2.14 0 3.88-1.72 3.88-3.83v-4.76c0-.02-.02-.04-.04-.05l-1.74-.99v5.75c0 .23-.13.45-.34.57l-4.13 2.35Zm-.67-1.153 4.17-2.38c.02-.01.03-.03.03-.05v-1.99l-5.04 2.87c-.21.12-.47.12-.68 0l-4.13-2.35c-.04-.02-.09-.06-.12-.07-.04.21-.06.43-.06.65 0 .67.18 1.33.52 1.92v-.01c.7 1.19 1.98 1.92 3.37 1.92.68 0 1.35-.18 1.94-.51ZM3.903 5.168v-.14c-.85.31-1.57.9-2.02 1.68a3.78 3.78 0 0 0-.52 1.91c0 1.37.74 2.64 1.94 3.33l4.17 2.37c.02.01.04.01.06 0l1.75-1-5.04-2.87a.64.64 0 0 1-.34-.57v-4.71Zm13.253 3.337-4.18-2.38c-.02 0-.04 0-.06.01l-1.74.99 5.04 2.87c.21.12.34.34.34.58v4.85c1.52-.56 2.54-1.99 2.54-3.6 0-1.37-.74-2.63-1.94-3.32ZM8.014 5.83c-.02.01-.03.03-.03.05v1.99L13.024 5a.692.692 0 0 1 .68 0l4.13 2.35c.04.02.08.05.12.07.03-.21.05-.43.05-.65 0-2.11-1.74-3.83-3.88-3.83-.68 0-1.35.18-1.94.51l-4.17 2.38Zm1.133-4.492c-2.15 0-3.89 1.72-3.89 3.83v4.76c0 .02.02.03.03.04l1.75 1v-5.75c0-.23.13-.45.34-.57l4.13-2.35c.04-.03.09-.06.12-.07-.7-.58-1.58-.89-2.48-.89ZM7.983 11.51l2.24 1.27 2.25-1.27V8.95l-2.25-1.28-2.24 1.28v2.56Z"
												      style="fill: rgb(31, 148, 140);"></path>
											</g>
										</g>
									</g>
								</g>
							</svg>
						</view>
					</view>
					<view class="home-chat-message-item">
						<view class="home-chat-message-top-actions" v-if="!isContext">
							<view v-if="message.streaming" class="home-chat-message-top-action" @click="stop()">停止</view>
							<view v-else class="home-chat-message-top-action" @click="deleteMessage()">删除</view>
							<view class="home-chat-message-top-action" v-if="false">重试</view>
							<view class="home-chat-message-top-action" @click="copyContent()">复制</view>

						</view>
						<view class="markdown-body" :class="{'show-cursor' : message.streaming}">
							<rich-text v-if="nodes && nodes.length" space="nbsp" :nodes="nodes" @itemclick="trOnclick"></rich-text>
						</view>
					</view>
					<view class="home-chat-message-actions">
						<view class="home-chat-message-action-date">{{ message.date }}</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="home-chat-message-user">
				<view class="home-chat-message-container">
					<view class="home-chat-message-avatar">
						<view class="home-user-avtar">
							<img src="https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/apple/64/1f603.png"
							     alt="smiley" class="EmojiPicker epr-emoji-img" loading="eager"
							     style="font-size: 18px; height: 18px; width: 18px;">
						</view>
					</view>
					<view class="home-chat-message-item">
						<div class="markdown-body">{{ message.content }}</div>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	emits: ["deleteMessage"],
	props: {
		message: {
			type: Object,
			default: () => {
			}
		},
		isContext: {
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {
			copyCode: {},
		}
	},
	computed: {
		nodes() {
			if (!this.message.content) {
				return;
			}
			const response = uni.$u.chat.render(this.message.content);
			this.copyCode = response.copyCode;
			return response.nodes;
		}
	},
	methods: {
		copyContent() {
			uni.setClipboardData({
				data: this.message.content,
				success() {
					uni.showToast({
						title: '已复制到剪切板',
						icon: 'none'
					})
				}
			})
		},
		deleteMessage(index) {
			this.$emit("deleteMessage", index);
		},
		stop() {
			this.message.streaming = false;
			this.message.isChating = false;
		},
		trOnclick(e) {
			let {attrs} = e.detail.node;
			let {"code-data-index": codeDataIndex, "class": className} = attrs;
			const code = this.copyCode[codeDataIndex];
			let flag = false;
			if (className === 'copy-btn' && code) {
				uni.setClipboardData({
					data: code,
					showToast: false,
					success() {
						flag = true;
					}
				})
			}
			uni.showToast({
				title: '复制' + (flag ? '成功' : "失败"),
				icon: 'none'
			});
		},
	}
}
</script>

<style lang="scss">

@import "../css/chat.scss";

.home-chat-body {
	flex: 1 1;
	overflow-y: auto;
	position: relative;
}

.home-chat-message {
	display: flex;
	flex-direction: row;
}

.home-chat-message-container {
	max-width: $message-max-width;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	animation: home-slide-in 0.3s ease;
	padding: 0 20px;
}

.home-chat-message-avatar {
	margin-top: 20px;
}

.home-chat-message-item {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 10px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 10px;
	font-size: 14px;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	word-break: break-word;
	border: $border-in-light;
	position: relative;
}

.home-chat-message-top-actions {
	font-size: 12px;
	position: absolute;
	right: 20px;
	top: -26px;
	left: 100px;
	transition: all 0.3s ease;
	opacity: 0;
	pointer-events: none;
	display: flex;
	flex-direction: row-reverse;
}

.home-chat-message-top-actions .home-chat-message-top-action {
	opacity: 0.5;
	color: $black;
	white-space: nowrap;
	cursor: pointer;
}

.home-chat-message-container:hover .home-chat-message-top-actions {
	opacity: 1;
	right: 10px;
	pointer-events: auto;
}

.home-chat-message-top-actions .home-chat-message-top-action:hover {
	opacity: 1;
}

.home-chat-message-top-actions .home-chat-message-top-action:not(:first-child) {
	margin-right: 10px;
}

.home-chat-message-actions {
	display: flex;
	flex-direction: row-reverse;
	width: 100%;
	padding-top: 5px;
	box-sizing: border-box;
	font-size: 12px;
}

.home-chat-message-action-date {
	color: #aaa;
}

.home-chat-message-user {
	display: flex;
	flex-direction: row-reverse;
}

.home-user-avtar {
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: $border-in-light;
	box-shadow: $card-shadow;
	border-radius: 10px;
}

.home-chat-message-user > .home-chat-message-container > .home-chat-message-item {
	background-color: $second;
}

.home-chat-message-user > .home-chat-message-container {
	align-items: flex-end;
}

.home-chat-body-tail {
	padding-bottom: 20px;
}

</style>